<template>
  <div class="wapper">
    <MangeListHeader />

    <MangeTableView
      :listData="listData"
      :pagination="pagination"
      :isLoading="isLoading"
      @handlePublic="handlePublic"
      @handleDetele="handleDetele"
      @handleCopy="handleCopy"
      @handlEdit="handlEdit"
      @handlSetting="handlSetting"
      @handleUrl="handlePublicUrl"
      @handleQRcode="handlePublicUrl"
      @handleStatistics="handleStatistics"
      @handleAnalysis="handleAnalysis"
      @paginationChange="paginationChange"
      @handlSuspend="handlSuspend"
    />
  </div>
</template>
<script lang="ts">
import { PaginationParam } from '@/model/common/PaginationParam';
import QuestionaireBasic from '@/model/questionaire/QuestionaireBasic';
import {
  DESIGNQUEST,
  SETTINGANALYSISINDEX,
  SETTINGANALYSISSOURCE,
  SETTINGAPPEARANCE,
  SETTINGPUBLISH,
} from '@/router/route-name';
import { useManageDetailStore, useManageQueryStore } from '@/store/manage';
import { computed, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import MangeListHeader from './MangeListHeaderView.vue';
import MangeTableView from './MangeTableView.vue';

export default defineComponent({
  components: { MangeListHeader, MangeTableView },
  setup() {
    const manageQueryStore = useManageQueryStore();
    const detailStore = useManageDetailStore();
    const router = useRouter();
    // 初始化请求
    manageQueryStore.query();

    // computed
    // 数据
    const listData = computed<QuestionaireBasic[]>(() => {
      return manageQueryStore.result;
    });

    // 分页数据
    const pagination = computed<PaginationParam>(() => {
      return manageQueryStore.pagination;
    });

    const isLoading = computed<boolean>(() => {
      return manageQueryStore.isLoading;
    });

    // 各种事件
    const handlePublic = async (value: string) => {
      await detailStore.queryPublic(value);

      await manageQueryStore.query();

      // message.success('发布成功');
    };

    const handleDetele = async (value: string) => {
      await detailStore.queryDelete(value);
      await manageQueryStore.query();
      // message.success('删除成功');
    };

    const handleCopy = async (value: string) => {
      await detailStore.queryCopy(value);

      await manageQueryStore.query();
      // message.success('复制成功');
    };

    const handlSuspend = async (value: string) => {
      await detailStore.querySuspect(value);
      await manageQueryStore.query();
    };

    const handlEdit = (value: string) => {
      router.push({ name: DESIGNQUEST, query: { queId: value } });
    };

    const handlSetting = (value: string) => {
      router.push({ name: SETTINGAPPEARANCE, query: { queId: value } });
    };

    const handlePublicUrl = (value: string) => {
      router.push({ name: SETTINGPUBLISH, query: { queId: value } });
    };

    const handleAnalysis = (value: string) => {
      router.push({ name: SETTINGANALYSISINDEX, query: { queId: value } });
    };

    const handleStatistics = (value: string) => {
      router.push({ name: SETTINGANALYSISSOURCE, query: { queId: value } });
    };

    const paginationChange = (page: number, size: number) => {
      manageQueryStore.setPage(page, size);
      manageQueryStore.query();
    };

    return {
      manageQueryStore,
      listData,
      pagination,
      isLoading,
      handleCopy,
      handleDetele,
      handlePublic,
      handlEdit,
      handlSetting,
      handlePublicUrl,
      handleAnalysis,
      handleStatistics,
      paginationChange,
      handlSuspend,
    };
  },
});
</script>
<style lang="less" scoped></style>
